1Strataix · UI Style Guide · tokens for color, type, spacing, radius, border, elevation, components

A single reference of everything used across Landing, Dashboard and Hi-fi screens. Treat the --sx-* variables as the source of truth; every new component should reach for them before introducing a new value.

2Color

2aSurfaces · dark (default)

--sx-bg#08090e · app background

--sx-panel#0e1016 · cards, sections

--sx-raised#161921 · tooltips, hover

--sx-line#1a1d26 · default border

--sx-line-2#262a35 · emphatic border

2bSurfaces · light

--sx-bgneutral-100 · background

--sx-panel#fcfcfe · cards

--sx-raised#fcfcfe · overlays

--sx-lineneutral-200 · borders

--sx-line-2neutral-300 · borders

2cBrand · primary & secondary

--sx-blue#2f6fff · primary action, live, series 1

--sx-blue-text#8fb2ff · text on blue tint

--sx-blue-tint-2#17295e · selection, pills

--sx-blue-tint#0f1a3d · nav active bg

--sx-violetblurple · findings, series 2

--sx-violet-tintaccent-900 · avatar, soft bg

neutral rampsurfaces, muted text, series 3

blue → violethero accents only, never fills

2dSemantic · status (marks & deltas only, never fills)

--sx-dangeroklch(.70 .15 25) · errors, overspend

--sx-warnoklch(.80 .12 80) · latency

--sx-okoklch(.76 .12 165) · savings, healthy

Status colours appear only on small marks, dots, and delta text — never as card fills or large backgrounds. Tints (color-mix … 16%) are the exception, used for narrow badges like "2 open".

2eText roles

Primary — #e9e9ed--sx-text · headings, values

Muted — #9397ab--sx-muted · labels, secondary

Faint — #75798c--sx-faint · captions, axes

Link — #9dbaffhover: #c6d5ff

2fData series (charts)

--sx-s1 · series 1Anthropic, primary line

--sx-s2 · series 2OpenAI, secondary line

--sx-s3 · series 3Google · other, tail

Fill opacity .55 for areas, .70 for the top layer. Threshold lines dashed stroke-dasharray:4 4 in --sx-danger.

3Typography

3aFamilies & roles

DISPLAY · MICHROMA · landing headlines, page titles, section eyebrows

The control plane for production AI.

OVERVIEW · ROUTES · GUARDRAILS

UI · IBM PLEX SANS 400 / 500 / 600 · all interface text, numbers (tabular)

$4,182 spend · 1.24M requests · p95 1.84s

Section title

Body text, default — 13px / 1.5 line height.

Secondary — 12px

Caption — 11px

MONO · IBM PLEX MONO · ids, models, tokens, code, timestamps

req_01J9X7KQ2 · claude-sonnet-4 · 48,210 tok · 09:41:58.214

3bScale (used across screens)

sizesampleusageweight / family 40Headlinehero on landing400 · Michroma 24KPI valuebig numbers in cards500 · Plex Sans 16Page headermodal titles500 · Plex Sans 14Section titlecard headings500 · Plex Sans 13Body defaulttable rows, nav items400 · Plex Sans 12Secondarymeta, legends400 · Plex Sans 11.5Legendchart legends, chips400 · Plex Sans 11CAPTION · EYEBROWlabels, axes, keyboard400 · Plex Mono 10.5ANCHORsection ids, badges600 · Plex Mono

4Spacing & grid

4aSpacing scale (px)

Gaps

Inline: 6–10
Card internal: 8–14
Grid gutter: 12
Section stack: 22
Between sections: 28–40

Padding

Nav row: 6×9
Input / chip: 6×10
KPI card: 12×14
Chart card: 14×16
Content frame: 16×20
Section frame: 40×44

Fixed heights

Topbar: 52
Sidebar: 216w
Canvas: 1440 × 900
Avatar: 22
Icon: 16

4bDashboard grid · 12 cols

KPI · 2

Hero chart · 8

Side list · 4

Chart · 6

Table · 8

Feed · 4

5Shape · radius, border, elevation

5aBorder radius

2micro marks

4keys, swatches

5anchor chips

6nav rows, segments

8 · --radius-mdinputs, cards default

10section frames

999pills, badges

50%avatars, dots

5bBorder weights

1px · --sx-linedefault card, table rows

1px · --sx-line-2inputs, chips, emphasis

1px · --sx-blueLive indicator, focus

1px dashedbudget line, p99

5cElevation

0 · panelflat surfaces

1 · raisedhover, segment active

2 · overlay · --shadow-mdtooltips, popovers, menus

6Components

6aButtons & actions

All providers Live 1h24h7d30d

6bInputs

Search requests, keys, routes⌘K

claude-sonnet-4

Required

6cBadges, chips, pills

2 open live healthy warn 1 1a Anthropic OpenAI

6dKPI card

Spend

$4,182

+12.0% vs yesterday

6eTable row

RouteModelRequestsTokensCacheCostΔ vs yesterday

support/triageclaude-sonnet-4402k41.2M12%$1,020+$310 · +44%

copilot/completegpt-4o377k28.7M71%$860+$92 · +12%

6fNav items

Overview

Requests1.24M

Settings

6gAlert / finding row

Budget at 92% · team support

Projected to exceed on Nov 27

Cache break on support/triage

System prompt reordered · 84% → 12%

18m

7Iconography · Phosphor @2.1.1

squares-four

list-dashes

tree-structure

git-fork

cloud

shield-check

key

wallet

bell-simple

magnifying-glass

caret-up-down

caret-down

warning-circle

lightning

scissors

clock-countdown

Weight: regular. Size: 16px inside controls and nav, 15px in alerts, 20px in reference. Icons always sit next to text with gap 8–10px; never stand alone to label an action.

8Data visualization

Keep charts Plex-labelled, blue-forward, with status colours only on marks and thresholds. Grid lines use color-mix(in srgb,var(--sx-text) 5%,transparent); axes are 10.5px Plex Mono in --sx-faint.

Stacked area · 3 series

Multi-line · latency percentiles

Bars · traffic with errors

Sparkline · KPI